<template>
  <div class="dialog-form page">
    <div class="base-container">
      <p class="title">基本信息</p>
      <el-descriptions class="descriptions">
        <el-descriptions-item label="所属公司：">{{ form.companyName }}</el-descriptions-item>
        <el-descriptions-item label="线路编号：">{{ form.lineNo }}</el-descriptions-item>
        <el-descriptions-item label="线路名称：">{{ form.lineName }}</el-descriptions-item>
        <el-descriptions-item label="线路类型：">
          <div style="display: inline-block">
            <dict-tag :options="bus_line_type" :value="form.lineType" />
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="线路票价：">{{ form.ticketPriceName ? formatAmount(form.ticketPriceName) + '元' : '' }}</el-descriptions-item>
        <el-descriptions-item label="线路状态：">
          <div style="display: inline-block">
            <dict-tag :options="bus_line_status" :value="form.status" />
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="base-container mt-10px">
      <p class="title">线路配置(<a class="link" href="https://lbs.qq.com/getPoint/" target="__blank">坐标拾取器</a>)</p>
      <div class="flex">
        <div class="stream-box">
          <div class="header">
            <p class="header-title">上行站点</p>
            <div class="points-box">
              <p>{{ upstream.start + ' - ' + upstream.end }}</p>
              <p class="f14">
                <span>首车：{{ startTime[0] }}</span>
                <span class="ml-20px">末车：{{ startTime[1] }}</span>
              </p>
            </div>
          </div>
          <div class="ml-10px mt-10px mr-10px">
            <el-table :data="upstream.list">
              <el-table-column label="序号" width="70" align="left" prop="sort">
                <template #default="scope">
                  <el-input v-model="scope.row.sort" @blur="getUpStationName" />
                </template>
              </el-table-column>
              <el-table-column label="站点名称" align="left" prop="stationName">
                <template #default="scope">
                  <el-input v-model="scope.row.stationName" @blur="getUpStationName" />
                </template>
              </el-table-column>
              <el-table-column label="经度" align="left" prop="longitude">
                <template #default="scope">
                  <el-input v-model="scope.row.longitude" type="number" />
                </template>
              </el-table-column>
              <el-table-column label="纬度" align="left" prop="latitude">
                <template #default="scope">
                  <el-input v-model="scope.row.latitude" type="number" />
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="60">
                <template #default="scope">
                  <el-button link type="primary" icon="Delete" @click="delStation(scope.row.id, scope.$index, 1)" v-hasPermi="['bus:line:remove']"></el-button>
                </template>
              </el-table-column>
            </el-table>
            <p class="add" @click="addPoint(upstream.list, 1)">新增</p>
          </div>
        </div>
        <div class="stream-box ml-10px">
          <div class="header down">
            <p class="header-title">下行站点</p>
            <div class="points-box">
              <p>{{ downstream.start + ' - ' + downstream.end }}</p>
              <p class="f14">
                <span>首车：{{ endTime[0] }}</span>
                <span class="ml-20px">末车：{{ endTime[1] }}</span>
              </p>
            </div>
          </div>
          <div class="ml-10px mt-10px mr-10px">
            <el-table :data="downstream.list">
              <el-table-column label="序号" width="70" align="left" prop="sort">
                <template #default="scope">
                  <el-input v-model="scope.row.sort" @blur="getDownStationName" />
                </template>
              </el-table-column>
              <el-table-column label="站点名称" align="left" prop="stationName">
                <template #default="scope">
                  <el-input v-model="scope.row.stationName" @blur="getDownStationName" />
                </template>
              </el-table-column>
              <el-table-column label="经度" align="left" prop="longitude">
                <template #default="scope">
                  <el-input v-model="scope.row.longitude" type="number" />
                </template>
              </el-table-column>
              <el-table-column label="纬度" align="left" prop="latitude">
                <template #default="scope">
                  <el-input v-model="scope.row.latitude" type="number" />
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="60">
                <template #default="scope">
                  <el-button link type="primary" icon="Delete" @click="delStation(scope.row.id, scope.$index, 2)" v-hasPermi="['bus:line:remove']"></el-button>
                </template>
              </el-table-column>
            </el-table>
            <p class="add" @click="addPoint(downstream.list, 2)">新增</p>
          </div>
        </div>
      </div>
    </div>
    <div class="dialog-footer">
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onConfirm">确认</el-button>
    </div>
  </div>
</template>

<script setup>
import { getLine, getLineStationList, delLineStation, saveLineStation } from "@/api/bus/line"
const { proxy } = getCurrentInstance()
const { bus_line_type, bus_line_status } = proxy.useDict("bus_line_type", 'bus_line_status')

const emits = defineEmits(['cancel'])

const form = ref({
  id: null,
  lineNo: null,
  lineName: null,
  lineType: null,
  startStation: null,
  endStation: null,
  firstStationTimeTmp: null,
  endStationTimeTmp: null,
  firstStationTime: null,
  endStationTime: null,
  ticketPriceId: null,
  companyId: null,
  status: 1
})
// 上行站点
const upstream = ref({
  start: '',
  end: '',
  list: []
})              
// 下行站点
const downstream = ref({
  start: '',
  end: '',
  list: []
})           
const startTime = ref([])
const endTime = ref([])

const pageInit = (id) => {
  getLine(id).then(response => {
    form.value = response.data
    startTime.value = getPointTime(form.value.firstStationTime)
    endTime.value = getPointTime(form.value.endStationTime)
  })
  getStationList(id)
}

const getUpStationName = () => {
  if (!upstream.value.list.length) return
  upstream.value.list.sort((a, b) => a.sort - b.sort)
  const length = upstream.value.list.length
  upstream.value.start = upstream.value.list[0].stationName
  upstream.value.end = upstream.value.list[length - 1].stationName
}

const getDownStationName = () => {
  if (!downstream.value.list.length) return
  downstream.value.list.sort((a, b) => a.sort - b.sort)
  const length = downstream.value.list.length
  downstream.value.start = downstream.value.list[0].stationName
  downstream.value.end = downstream.value.list[length - 1].stationName
}

const addPoint = (arr, type) => {
  // type：1上行  2下行
  const length = arr.length
  arr.push({
    id: null,
    sort: length + 1,
    stationName: '',
    longitude: '',
    latitude: '',
    type: type,
    lineNo: form.value.id
  })
}

const getPointTime = (str) => {
  if (str) {
    const arr = str.split('—')
    return arr
  } else {
    return ['', '']
  }
}

// 获取站点列表
const getStationList = (id) => {
  const params = {
    lineNo: id
  }
  getLineStationList(params).then(res => {
    if (res.code == 200) {
      res.data.forEach(obj => {
        if (obj.type == 1) {
          // 上行
          upstream.value.list.push(obj)
        } else {
          downstream.value.list.push(obj)
        }
      })
      getUpStationName()
      getDownStationName()
    }
  })
}

// 删除站点
const delStation = (id, index, type) => {
  if (id) {
    delLineStation(id).then(res => {
      handleDel(index, type)
    })
  } else {
    handleDel(index, type)
  }
}

const handleDel = (index, type) => {
  if (type === 1) {
    upstream.value.list.splice(index, 1)
    getUpStationName()
  } else {
    downstream.value.list.splice(index, 1)
    getDownStationName()
  }
}

const onCancel = () => {
  emits('cancel')
}

const onConfirm = () => {
  // if (!upstream.value.list.length) {
  //   return proxy.$modal.msgWarning('请添加上行站点')
  // }
  // if (!downstream.value.list.length) {
  //   return proxy.$modal.msgWarning('请添加下行站点')
  // }
  let list = [].concat(upstream.value.list)
  list = list.concat(downstream.value.list)
  saveLineStation(list).then(res => {
    proxy.$modal.msgSuccess('保存成功')
    emits('confirm')
  })
}

defineExpose({
  pageInit
})

</script>

<style lang="scss" scoped>
@import '../../../assets/styles/variables.module.scss';
.page {
  background-color: $main-bg-color;
  margin: -20px -16px;
  padding: 10px 10px 0;
}

.title {
  color: rgb(31, 31, 31);
  font-size: 16px;
  font-weight: 500;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed rgb(225, 225, 225);

  .link {
    color: #409EFF;
    // margin-left: 10px;
    font-size: 14px;
    cursor: pointer;
  }
}

.descriptions {
  :deep(.el-descriptions__cell) {
    width: 33.33%
  }

  :deep(.el-descriptions__content) {
    word-break: break-all;
  }
}

.stream-box {
  flex: 1;
  position: relative;
  .header {
    border-radius: 8px 8px 0 0;
    height: 96px;
    background-color: rgb(64, 128, 255);
    padding: 12px 16px;
    box-sizing: border-box;

    .header-title {
      color: #fff;
      font-size: 16px;
      font-weight: 500;
    }
  }

  .points-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    margin-top: 25px;
  }

  .down {
    background-color: rgb(43, 84, 239);
  }

  .add {
    margin-top: 10px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background-color: rgb(245, 245, 245);
    color: rgb(75, 75, 75);
    font-size: 14px;
    cursor: pointer;
  }
}

.dialog-footer {
  margin-left: -10px;
  margin-right: -10px;
  background-color: #fff;
}

.f14 {
  font-size: 14px;
}

.no-border {
  border: none !important;
}

</style>